<template>
  <div class="page-container">
    <router-view v-if="$route.name !== 'MeetingSign'"></router-view>
    <div v-else>
      <!-- 顶部标题栏 -->
      <header class="header">
        <BackBtn />
        <h1>签到情况</h1>
        <Time />
      </header>

      <!-- 主要内容区域 -->
      <div class="main-content" v-loading="loading" element-loading-text="加载中..." element-loading-background="rgba(0,0,0,0)"> 
        <!-- 会议基本信息 -->
        <div class="meeting-info-section">
          <h2 class="section-title">会议题目</h2>
          <div class="meeting-title">{{ meetingDetail?.meetingInfo?.title }}</div>

          <div class="meeting-stats">
            <div class="stats-item">
              <h2 class="section-title">签到起止时间</h2>
              <span class="value">{{ meetingDetail?.meetingInfo?.startTime }} 至 {{ meetingDetail?.meetingInfo?.endTime }}</span>
            </div>
          </div>
        </div>

        <!-- 签到状态表格 -->
        <div class="sign-status-section">
          <h2 class="section-title">签到状态</h2>
          <div class="stats-summary">
              <span>已签到 <span style="font-size: 25px;color: green;">{{ meetingDetail?.signedCount || 0 }}</span>人</span>
              <span>未签到 <span style="font-size: 25px;color: red;">{{ meetingDetail?.unsignedCount || 0 }}</span>人</span>
              <span>总计 <span style="font-size: 25px;color: blue;">{{ meetingDetail?.totalParticipants || 0 }}</span>人</span>
          </div>
          <br>
       
          <div class="sign-table">
            <div v-if="!meetingDetail?.participants || meetingDetail.participants.length === 0" 
                 class="no-data">暂无签到人员数据</div>
            <template v-else>
              <div class="table-header">
                <div class="header-cell">状态</div>
                <div class="header-cell">姓名</div>
                <div class="header-cell">身份</div>
                <div class="header-cell">地区</div>
                <div class="header-cell">界别</div>
              </div>
              <div class="table-body">
                <div v-for="(item, index) in meetingDetail?.participants" :key="index" class="table-row">
                  <div class="table-cell">{{ item.mpStatus }}</div>
                  <div class="table-cell">{{ item.uname }}</div>
                  <div class="table-cell">{{ item.identity }}</div>
                  <div class="table-cell">{{ item.region }}</div>
                  <div class="table-cell">{{ item.affiliation }}</div>
                </div>
              </div>
            </template>
          </div>
        </div>
        <br>

        <!-- 未签到原因 -->
        <div class="sign-status-section" v-if="hasUnsignedReasons">
          <h2 class="section-title">上报的未签到理由</h2>
          <div class="sign-table">
            <div class="table-header">
              <div class="header-cell">姓名</div>
              <div class="header-cell">理由</div>
            </div>
            <div class="table-body">
              <div v-for="item in unsignedParticipants" :key="item.uid" class="table-row">
                <div class="table-cell">{{ item.uname }}</div>
                <div class="table-cell">{{ item.reason || '未提供理由' }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'

import { getMeetingDetail } from '@/api/meetings'
import Time from '@/components/Time.vue'
import BackBtn from '@/components/Back-btn.vue'
const router = useRouter()
const route = useRoute()
const loading = ref(false)
const meetingDetail = ref(null)

// 计算未签到的参会人
const unsignedParticipants = computed(() => {
  return meetingDetail.value?.participants?.filter(p =>
    p.mpStatus === '未签到'
  ) || []
})

// 是否显示未签到原因区域
const hasUnsignedReasons = computed(() => {
  return unsignedParticipants.value.length > 0
})


// 获取会议签到详情
const fetchMeetingDetail = async () => {
  loading.value = true
  try {
    const response = await getMeetingDetail(route.params.mid)
    if (response.code === 200) {
      meetingDetail.value = response.data
    } else {
      ElMessage.error(response.msg || '获取会议详情失败')
    }
  } catch (error) {
    console.error('获取会议详情错误:', error)
    ElMessage.error('获取会议详情失败')
  } finally {
    loading.value = false
  }
}

onMounted(() => {

  fetchMeetingDetail()
})


</script>

<style scoped>
@import '@/assets/css/meeting/meetingSign.css';
@import '@/assets/css/header/index.css';
@import '@/assets/css/others/btn.css';

</style>